import { Link } from "@tanstack/react-router";
import { format } from "date-fns";
import { CircleCheckIcon, CircleXIcon, FlaskConicalIcon } from "lucide-react";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export type ReportItem = {
  id: string;
  title: string;
  start: number;
  duration: Date;
  total: number;
  passed: number;
  failed: number;
  skipped: number;
  broken: number;
  unknown: number;
  issue: number;
};

export function ReportsListItem({ report }: { report: ReportItem }) {
  return (
    <Link to="/reports/$id" params={{ id: report.id }}>
      <Card
        key={report.id}
        className="group cursor-pointer gap-3 py-4 transition-colors duration-200 hover:bg-primary/10"
      >
        <CardHeader className="px-4">
          <CardTitle className="truncate uppercase">{report.title}</CardTitle>
          <CardDescription>
            {format(new Date(report.start), "yyyy-MM-dd HH:mm:ss")}
          </CardDescription>
        </CardHeader>
        <CardContent className="px-4 font-semibold text-2xl">
          {((report.passed / report.total) * 100).toFixed(2)} %
        </CardContent>
        <CardFooter className="px-4 text-xs">
          <div className="flex items-center justify-between">
            <div className="flex items-center justify-start gap-3">
              <div className="flex items-center gap-1.5">
                <FlaskConicalIcon className="size-3.5" />
                <p>{report.total}</p>
              </div>
              <div className="flex items-center gap-1.5">
                <CircleCheckIcon className="size-3.5" />
                <p>{report.passed}</p>
              </div>
              <div className="flex items-center gap-1.5">
                <CircleXIcon className="size-3.5" />
                <p>{report.failed}</p>
              </div>
            </div>
          </div>
        </CardFooter>
      </Card>
    </Link>
  );
}
